<template>
<div v-wechat-title="$route.meta.title"></div>
    <Header />
    <div id="card">
        <el-card class="box-card" shadow="always">
            <div class="title">{{article.title}}</div>
            <br />
            <div class="author">作者：{{article.user_name}}</div>
            <br /><br />
            <div v-html="article.content" id="content" v-highlight></div>
        </el-card>
    </div>
    <Footer />
</template>

<script>
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
import articleService from "@/service/articleService";

export default {
    name: "ArticleDetail",
    components: { Header, Footer},
    data(){
    return{
            article:'',
        };
    },
    mounted(){ 
        articleService.get_article_detail(this.$route.params.id)
            .then((response) => (this.article = response.data.data.post));
    },
};

</script>

<style scoped>
#card{
    display:flex;
    justify-content: center;
    align-items: center;
    position:relative;
}

.box-card{
    width: 80%;
}
.title{
    text-align: center;
    font-family: "GB2312 KaiTi_GB2312";
    font-weight: 800;
    font-size: x-large;
    color: black;
}
.author{
    text-align: center;
}
#content {
    width: 100%;
    display: block;
    word-break: break-all;
    word-wrap: break-word;
}
</style>